import * as React from 'react';
import { useState, useEffect } from 'react';
import Banner from '@/components/banner';
import logo from '@/asset/logo.png';
import topBanner from '@/asset/topBanner.png';
import { Grid, Collapse } from 'antd-mobile';
import './features.less';
import { history } from 'umi';

export default function features() {
  const barImg_list = [logo, topBanner];
  const gofeaturesdetail = (id: any) => {
    console.log(id);
    history.push(`/index/featuresdetail/${id}`);
  };
  let [data, setData] = useState([
    {
      image:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F17%2F20210717232533_2edcf.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663921279&t=90df4d9a0be9bc9c4cbcb9a67f162428',
      msg: '长春市聚仁塑胶材料有限公司',
    },
    {
      image:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202107%2F09%2F20210709142454_dc8dc.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663921279&t=15fc5162eb09542df047afca26cb05a3',
      msg: '汽车零部件有限公司',
    },
    {
      image:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201809%2F01%2F20180901214613_VXdRf.thumb.700_0.jpeg&refer=http%3A%2F%2Fb-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663921279&t=0bfed53ed6f5620d0fcbc391c2a79d8b',
      msg: '长春市国泰汽车零件有限公司',
    },
    {
      image:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201908%2F19%2F20190819150344_ALnaX.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663921279&t=d201d63ad5d9f8e3ef6700c8fab705a5',
      msg: '吉林省晟泽汽车内饰有限公司',
    },
    {
      image:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F201912%2F28%2F20191228105602_4Wm5z.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663921279&t=1b8bc8cd2f8bad5c03398c7e9140fb71',
      msg: '长春市昊东机械有限责任公司',
    },
    {
      image:
        'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202012%2F05%2F20201205222744_c0b59.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1663921279&t=1024c43499ad635f9d1e0284df02532c',
      msg: '吉林省豪瑞实业有限责任公司',
    },
  ]);

  return (
    <div>
      <Banner barImg_list={barImg_list}></Banner>
      <div className="content">
        <Grid columns={24}>
          <Grid.Item span={8} className="left">
            <Collapse defaultActiveKey={['1']}>
              <Collapse.Panel key="1" title="第一项">
                这里是第一项的内容
                <br />
                这里是第一项的内容
                <br />
                这里是第一项的内容
                <br />
                这里是第一项的内容
                <br />
                这里是第一项的内容
                <br />
                这里是第一项的内容
                <br />
              </Collapse.Panel>
              <Collapse.Panel key="2" title="第二项">
                这里是第二项的内容
              </Collapse.Panel>
              <Collapse.Panel key="3" title="第三项">
                这里是第三项的内容
              </Collapse.Panel>
            </Collapse>
          </Grid.Item>
          <Grid.Item span={16}>
            <div className="rightTop">
              <input type="text" />
              <button>企业搜索</button>
            </div>
            <div className="rightList">
              {data.map((item: any, index: any) => {
                return (
                  <div
                    className="item"
                    key={index}
                    onClick={() => gofeaturesdetail(1)}
                  >
                    <img src={item.image} alt="" />
                    <p>【{item.msg}】</p>
                  </div>
                );
              })}
            </div>
          </Grid.Item>
        </Grid>
      </div>
    </div>
  );
}
